<script setup>
import { onMounted, ref, reactive } from "vue";
import { Notification } from "@arco-design/web-vue";
import { useStore } from "../store";

import IconGroup from "../components/IconGroup.vue";
import AddIconGroup from "../components/AddIconGroup.vue";

const store = useStore();
const createBandName = ref();
const isAddGroupModalShow = ref(false);
const isLoading = ref(false);

//组件初次挂载获取IconGroup数据
onMounted(() => {
  isLoading.value = true;
  store.refreshBandList().finally(() => {
    isLoading.value = false;
  });
});

//新增IconGroup显示Modal的点击事件
const AddIconGroupClickHandle = () => {
  isAddGroupModalShow.value = true;
};

//IconGroup的Modal
const handleBeforeOk = async () => {
  store.createBand(createBandName.value).then(
    () => {
      Notification.success("创建IconGroup成功！");
    },
    () => {
      Notification.error("创建IconGroup失败！");
    }
  );
  createBandName.value = "";
  // await new Promise(resolve => setTimeout(() => { resolve(); console.log('增好了！');Notification.success('创建成功!') }, 1000));
  // return true;
};
//关闭新增IconGroup的Modal
const handleCancel = () => {
  isAddGroupModalShow.value = false;
};
</script>

<template>
  <!-- 加载中 -->
  <div class="homeLoadingBox" v-if="isLoading">
    <a-spin dot class="homeLoading" />
  </div>
  <!-- 遍历store中的bands渲染IconGroup -->
  <div class="homeContainer">
    <!-- store中bands的长度不为零时遍历并显示各Group -->
    <IconGroup
      v-for="item in store.bands"
      v-if="store.bands.length"
      :band="item"
    />
    <!-- store中bands的长度为零时显示空 -->
    <div v-else="!store.bands.length">
      <h1 class="noneText">暂无IconGroup</h1>
    </div>
    <AddIconGroup :clickHandle="AddIconGroupClickHandle" />
  </div>

  <!-- 新增IconGroup的Modal结构 -->
  <a-modal
    v-model:visible="isAddGroupModalShow"
    @cancel="handleCancel"
    :on-before-ok="handleBeforeOk"
    unmountOnClose
  >
    <template #title> 新建一个IconGroup </template>
    <a-input
      v-model="createBandName"
      placeholder="请输入IconGroup名称"
      allow-clear
    />
  </a-modal>
</template>

<style scoped>
.homeContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
  justify-content: space-between;
  align-content: space-between;
}

.noneText {
  line-height: 300px;
  text-align: center;
}

@media screen and (max-width: 1500px) {
  .homeContainer {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1000px) {
  .homeContainer {
    grid-template-columns: 1fr;
  }
}
</style>
